<template>
  <!-- PlayList组件右边导航组件 -->
  <div class="right_nav">
    <div class="head">
      <span class="title">评论</span>
      <span class="total">{{ "共" + comments.total + "条评论" }} </span>
    </div>
    <div class="content">
      <div
        class="hot_comment"
        ref="hotComment"
        v-if="comments.hotComments && comments.hotComments.length !== 0"
      >
        <div class="hot_comment_title">精彩评论</div>
        <div
          class="item"
          v-for="item in comments.hotComments"
          :key="item.commentId"
        >
          <div class="pic">
            <img :src="item.user.avatarUrl" alt="" class="pic_url" />
          </div>
          <div class="detail">
            <span class="author">{{ item.user.nickname + "：" }}</span>
            <span class="comment">{{ item.content }}</span>
            <div class="timer">
              <span class="dt">{{ getTimer(item.time) }}</span>
              <span class="goods"> {{ item.likedCount }}</span>
            </div>
          </div>
        </div>
      </div>

      <div class="new_comment">
        <div class="new_comment_title">最新评论</div>
        <div
          class="item"
          v-for="item in comments.comments"
          :key="item.commentId"
        >
          <div class="pic">
            <img :src="item.user.avatarUrl" alt="" class="pic_url" />
          </div>
          <div class="detail">
            <span class="author">{{ item.user.nickname + "：" }}</span>
            <span class="comment">{{ item.content }}</span>
            <div class="timer">
              <span class="dt">{{ getTimer(item.time) }}</span>
              <span class="goods"> {{ item.likedCount }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <Page
      :total-data="totalData"
      :page-num="50"
      @change-page="changePage"
    ></Page>
  </div>
</template>

<script>
import { defineComponent, inject, onUpdated, reactive, toRefs, ref } from "vue";
import Page from "@/components/page/Page.vue";
import { completeFormatDate } from "@/utils/formate.js";
export default defineComponent({
  name: "RightNav",
  components: {
    Page,
  },
  setup(props, context) {
    let hotComment = ref(null);
    let data = reactive({
      totalData: 0,
    });
    let comments = inject("comments");

    onUpdated(() => {
      data.totalData = comments.value.total;
    });

    // 获取时间
    let getTimer = (time) => {
      return completeFormatDate(new Date(time), "yyyy-MM-dd hh:mm");
    };

    // 改变页码
    let changePage = (page) => {
      context.emit("changePage", {
        page,
        height: hotComment.value.offsetHeight,
      });
    };

    return { ...toRefs(data), comments, getTimer, changePage, hotComment };
  },
});
</script>
<style scoped>
.right_nav {
  width: 30%;
  padding: 5px 10px;
}
.head {
  width: 100%;
  padding: 10px;
  border-bottom: 2px solid #c20c0c;
}
.title {
  font-size: 20px;
  color: #222;
  font-weight: 700;
  margin-right: 10px;
}

.hot_comment,
.new_comment {
  width: 100%;
  border-bottom: 2px solid #eee;
  margin-bottom: 10px;
}
.hot_comment_title,
.new_comment_title {
  font-size: 16px;
  color: #222;
  font-weight: 700;
}

.content {
  width: 100%;
  margin-top: 20px;
}

.item {
  width: 100%;
  display: flex;
  margin: 14px 0;
}
.pic {
  width: 60px;
  height: 60px;
  border-radius: 5px;
  margin-right: 10px;
}

.pic_url {
  width: 100%;
  height: 100%;
}

.detail {
  flex: 1;
}

.author {
  font-size: 14px;
  color: #0c73c6;
  margin-right: 10px;
}
.comment {
  font-size: 14px;
  color: #666;
}

.timer {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 10px;
}

.dt,
.goods {
  font-size: 14px;
  color: #888;
}
.goods {
  color: #c20c0c;
}
</style>
